<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="js/objectdetect.js"></script>
<script src="js/objectdetect.frontalface.js"></script>

<script src="js/jquery.js"></script>
<script src="js/jquery.objectdetect.js"></script>

    <title>OR-WIFI-ROBOT</title>
    <link rel="stylesheet" type="text/css" href="res/main.css"/>
    <script type="text/javascript">

	
	f_cnt = 0;
	state = 'f0';
	arduino_command = 'f0';
	var img_url_template = "img/ctrl_%1.gif";

	function changeImage(state) {
		img_url = img_url_template.replace('%1', state);
		dom_obj = document.getElementById("ctrl_panel");
		dom_obj.src = img_url;
    }

    function proccessKey(keyCode){
	keychar = String.fromCharCode(keyCode);    	
	if (keyCode == 87){
			up();
			submitUART(state);
			changeImage(state);	
    	}
    	if (keyCode == 81){
    		stop();
		submitUART(state);
		changeImage(state);			
    	}
    	if (keyCode == 83){
			down();
			submitUART(state);
			changeImage(state);
    	}
    	if (keyCode == 65){
			left();
			submitUART(state);
			changeImage(state);
    	}
    	if (keyCode == 68){
			right();
			submitUART(state);
			changeImage(state);
    	}
    	if (keychar == 'I' || keychar == 'K' ||
	keychar == 'J' || keychar == 'L' ||  keychar == 'O'){
		submitUART(keychar);
	}
	    
    }

    function up () {
        if (f_cnt == 'b') f_cnt = 0;
    	if (f_cnt +1 > 3) 
    		f_cnt = 3;
    	else
    		f_cnt += 1;
		state = f_cnt;
    }

	function down () {
    	if (f_cnt - 1 < 0 || f_cnt == 'b')
    		f_cnt = 'b';
    	else
    		f_cnt -= 1;
		state = f_cnt;
    }

    function left () {
    	f_cnt = 0;
	   	state = 'l';   		    	
    }

    function right () {
    	f_cnt = 0;
	   	state = 'r';	    	
    }

    function stop () {
    	f_cnt = 0;
	   	state = '0';	
    }

    function myKeyDown(e) {
		var keyCode;
		if (e) {
			keyCode = e.which;
		}
		else if (window.event) {
			keyCode = window.event.keyCode;
		}
		proccessKey(keyCode);
		return true;
	}

	function submitUART(uartString)	{
        document.getElementById('serialData').value=uartString+"\n";
        document.getElementById('serialForm').submit()
	};

	function keyPressed(e)
	{
		var keynum
		var keychar
		var numcheck

		if(window.event) // IE
		{
		keynum = e.keyCode
		}
		else if(e.which) // Netscape/Firefox/Opera
		{
		keynum = e.which
		}
		
		keychar = String.fromCharCode(keynum);
		submitUART(keychar);
		return true;
	};

	document.onkeydown = myKeyDown;
    </script>
</head>
<body>
<input type="checkbox" id="track" value="track">Track face<br>
<table>
    <tr>
        <td>
            <script type="text/javascript">
                document.write("<img id='face' alt='Robot Eye' class='bot-eye' height='480' width='640' src='http://" + document.location.hostname + ":8080/?action=stream'/>")
		//		document.write("<img id='face' alt='Robot Eye' class='bot-eye' src='img/face.jpg'/>")
            </script>
			<hr style="width: 240px;margin-top: 15px">
        </td>
        <td>
            <form id="serialForm" action="/cgi-bin/serial.cgi" method="POST" target="hidden">
                    <textarea id="serialData" name="SERIAL_DATA" rows="1" cols="40">TEST SERIAL</textarea>
                <input type="submit" value="Send">
            </form>

        	<img id="ctrl_panel" src="img/ctrl_f0.png">
        	<div>w-Forward, a-Left, s-Backward, d-Right, q-Stop</div>
        	<br/>
        	<div>i-Up, k-Down, j-Left, l-Right, o-Reset</div>
        </td>
    </tr>
    <tr>
    	<td/>
        <td>
            <hr style="width: 240px;margin-top: 15px">
        </td>
    </tr>
	
	<script>
	setInterval(function(){
			if ($("#track").is(":checked")){
//				var img = $("#face");
//				var mainRect = new Array(img.position().top, img.position().left, img.offset().top, img.offset().left);
//				console.log(mainRect);
//				$(this).highlight(mainRect, "green");
				$("#face").objectdetect("all", {classifier: objectdetect.frontalface}, function(faces) {
					for (var i = 0; i < faces.length; ++i) {
						console.log(faces[i]);
						$(this).highlight(faces[i], "red");
					}
				});
			}
	}, 2000);
    
</script>

</table>
<hr/>
<iframe name="hidden" src="/nothing.html" style="width: 1px;height: 1px;visibility: hidden"></iframe>

<a href="admin/index.html">Robot administration</a>
</body>
</html>
